$(function(){ //页面加载完毕才执行
    
    // 首页->导航
    //首页->关注我们
    //微博
    $('.ff-right a:nth-of-type(1) span').hover(function(){
        $('.ff-right a:nth-of-type(1) span').css('background','#d9595c')
    },function(){
        $('.ff-right a:nth-of-type(1) span').css('background','#c9c9c9')                
    })
    //微信
    $('.ff-right a:nth-of-type(2) span').hover(function(){
        $('.ff-right a:nth-of-type(2) span').css('background','#00925f')
        $('.ff-right a:nth-of-type(2) img').show()
    },function(){
        $('.ff-right a:nth-of-type(2) span').css('background','#c9c9c9')        
        $('.ff-right a:nth-of-type(2) img').hide()
    })
    //服务窗
    $('.ff-right a:nth-of-type(3) span').hover(function(){
        $('.ff-right a:nth-of-type(3) span').css('background','#1caceb')
        $('.ff-right a:nth-of-type(3) img').show()
    },function(){
        $('.ff-right a:nth-of-type(3) span').css('background','#c9c9c9')        
        $('.ff-right a:nth-of-type(3) img').hide()
    })

    // 登录跳转
    $('.sec-four button:nth-of-type(1)').click(function(){
        $('.sec-second p').show()
    })
    $('.sec-second input:nth-of-type(1)').focus(function(){
        $('.sec-second p').hide()        
    })
    $('.sec-four button:nth-of-type(2)').click(function(){
        location.href = '03注册.html'
    })
    //注册
    $('.sec-third button').click(function(){
        $('.sec-second p').show()
    })



// ———————————————轮播图—————————————————
    //=========设置参数==========
    //图片统一高度：
    var images_height = '820px';
    //图片路径/链接(数组形式):
    var images_url = [
        'images/lb1.jpg',
        'images/lb3.jpg',
        'images/lb2.jpg',
        'images/lb1.jpg',
    ];
    var images_count = images_url.length;
    //console.log(images_count);

    //创建节点
    //图片列表节点
    for(var j=0;j<images_count+1;j++){//多添加一个li
        $('.banner ul').append('<li></li>')
    }
    //轮播圆点按钮节点
    for(var j=0;j<images_count;j++){
        if(j==0){
            $('.banner ol').append('<li class="current"></li>')
        }else{
            $('.banner ol').append('<li></li>')
        }
    }
        
    //载入图片
    $('.banner ul li').css('background-image','url('+images_url[0]+')');//把第一张图片放进所有li 再将其他的图片依次放进li，多出来的一个li里就是第一张
    $.each(images_url,function(key,value){
        $('.banner ul li').eq(key).css('background-image','url('+value+')');
    });

    $('.banner').css('height',images_height);

    $('.banner ul').css('width',(images_count+1)*100+'%');

    $('.banner ol').css('width',images_count*20+'px');
    $('.banner ol').css('margin-left',-images_count*20*0.5-10+'px');

    //=========================

    var num = 0;
    //获取窗口宽度
    var window_width = $(window).width();
    $(window).resize(function(){
        window_width = $(window).width();
        $('.banner ul li').css({width:window_width});
        clearInterval(timer);
        nextPlay();
        timer = setInterval(nextPlay,2000);
    });
    //console.log(window_width);
    $('.banner ul li').width(window_width);
    //轮播圆点
    $('.banner ol li').mouseover(function(){//用hover的话会有两个事件(鼠标进入和离开)
        $(this).addClass('current').siblings().removeClass('current');
        //第一张图： 0 * window_width
        //第二张图： 1 * window_width
        //第三张图： 2 * window_width
        //获取当前编号
        var i = $(this).index();
        //console.log(i);
        $('.banner ul').stop().animate({left:-i*window_width},500);
        num = i;
    });
    //自动播放
    var timer = null;
    function prevPlay(){
        num--;
        if(num<0){
            //悄悄把图片跳到最后一张图(复制页,与第一张图相同),然后做出图片播放动画，left参数是定位而不是移动的长度
            $('.banner ul').css({left:-window_width*images_count}).stop().animate({left:-window_width*(images_count-1)},500);
            num=images_count-1;
        }else{
            //console.log(num);
            $('.banner ul').stop().animate({left:-num*window_width},500);
        }
        if(num==images_count-1){
            $('.banner ol li').eq(images_count-1).addClass('current').siblings().removeClass('current');
        }else{
            $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

        }
    }
    function nextPlay(){
        num++;
        if(num>images_count){
            //播放到最后一张(复制页)后,悄悄地把图片跳到第一张,因为和第一张相同,所以难以发觉,
            $('.banner ul').css({left:0}).stop().animate({left:-window_width},500);
            //css({left:0})是直接悄悄改变位置，animate({left:-window_width},500)是做出移动动画
            //随后要把指针指向第二张图片,表示已经播放至第二张了。
            num=1;
        }else{
            //在最后面加入一张和第一张相同的图片，如果播放到最后一张，继续往下播，悄悄回到第一张(肉眼看不见)，从第一张播放到第二张
            //console.log(num);
            $('.banner ul').stop().animate({left:-num*window_width},500);
        }
        if(num==images_count){
            $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
        }else{
            $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

        }
    }
    timer = setInterval(nextPlay,2000);
    //鼠标经过banner，停止定时器,离开则继续播放
    $('.banner').mouseenter(function(){
        clearInterval(timer);
        //左右箭头显示(淡入)
        $('.banner i').fadeIn();
    }).mouseleave(function(){
        timer = setInterval(nextPlay,3000);
        //左右箭头隐藏(淡出)
        $('.banner i').fadeOut();
    });
    //播放下一张
    $('.banner .right').click(function(){
        nextPlay();
    });
    //返回上一张
    $('.banner .left').click(function(){
        prevPlay();
    })

// ———————————————地图—————————————————
  // 图表实例化------------------
  // srcipt标签式引入
  var myChart = echarts.init(document.getElementById('main'));

  // 过渡---------------------
  myChart.showLoading({
    text: '正在努力的读取数据中...', //loading话术
  });

  // ajax getting data...............

  // ajax callback
  myChart.hideLoading();


  // 配置图表显示
  var option = {    
        tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    series : [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name:'河南',selected:true}
            ]
        }
    ]
  };

  // 为echarts对象加载数据
  myChart.setOption(option);

})